<template>
  <div class="home">
    <!-- van-pull-refresh 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 首页-轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in carouselData" :key="item.c_id">
          <img :src="item.c_img" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 首页-通知栏 -->
      <van-notice-bar left-icon="volume-o" text="8月14到8月20预约购买团课打九折优惠  8月14到8月20预约购买团课打九折优惠  8月14到8月20预约购买团课打九折优惠" />
      <div class="title">
        <span>
          <img src="../assets/u286.png" alt="" />
        </span>
        <span>推荐私教</span>
        <span>
          <router-link to="/leisureclass/2">更多</router-link>
          <van-icon name="arrow" />
        </span>
      </div>
      <!-- 首页-组件-推荐私教 -->
      <PrivateEducation v-if="classPeData" :classPeData="classPeData" />
      <div class="title">
        <span>
          <img src="../assets/u286.png" alt="" />
        </span>
        <span>推荐团课</span>
        <span>
          <router-link to="/leisureclass/1">更多</router-link>
          <van-icon name="arrow" />
        </span>
      </div>
      <!-- 首页-组件-推荐团课 -->
      <League v-if="classData" :classData="classData" />
      <!-- 首页-Tabbar导航栏 -->
      <Tabbar active="home" />
    </van-pull-refresh>
  </div>
</template>

<script>
import {getAppClass, getAppClassPe, getCarousel} from '../http/api'
import {Toast} from 'vant'
import Tabbar from '../components/Tabbar'
import PrivateEducation from '../components/PrivateEducation'
import League from '../components/League'

export default {
  name: 'Home',
  components: { League, PrivateEducation, Tabbar },
  data() {
    return {
      carouselData: null,
      classData: null,
      classPeData: null,
      isLoading: false,
      show: false
    }
  },
  methods: {
    getCarousels() {
      getCarousel().then((res) => {
        this.carouselData = res.data.data
      })
    },
    getAppClass() {
      getAppClass().then(res => {
        this.classData = res.data.data
      })
    },
    getAppClassPe() {
      getAppClassPe().then(res => {
        this.classPeData = res.data.data
      })
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
      }, 1000)
    }
  },
  mounted() {
    this.getCarousels()
    this.getAppClass()
    this.getAppClassPe()
    this.$store.state.title = '首页'
  }
}
</script>

<style>
img {
  width: 100%;
  height: 220px;
}
.title {
  margin: 3px 4px 0 5px;
  padding: 3px;
}
.title img {
  border-width: 2px;
  position: absolute;
  width: 5px;
  height: 25px;
}
.title > span:nth-child(2) {
  margin-left: 6px;
  line-height: 25px;
  font-size: 15px;
  font-weight: bold;
}
.title > span:nth-child(3) {
  float: right;
  margin-right: 6px;
  line-height: 25px;
  font-size: 12px;
  color: rgba(106, 92, 92, 0.46);
}
.title > span:nth-child(3)>a:link{
  color: rgba(106, 92, 92, 0.46);
}
.title > span:nth-child(3)>a:visited{
  color: rgba(106, 92, 92, 0.46);
}
</style>
